<template>
	

	<view>
		<!-- 通告栏 -->
		<uni-notice-bar scrollable showIcon single text="双十二裸到底客光棍节促销，全场满300元直减60元，12月12日0时—24时，仅此一天!!年度最疯狂促销"></uni-notice-bar>
		<!-- 轮播图 -->
		<uni-swiper-dot :info="carPicInfo" :current="current" field="content" :mode="modeStyle">
			<swiper class="swiper-box" @change="dotChange" autoplay="true" circular="true" interval=2000 duration=600>
				<swiper-item v-for="(item ,index) in carPicInfo" :key="index">
					<view class="swiper-item">
						<image style=" width: 100%;height: 300px;" mode="widthFix" :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- echart -->


		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>


		<button @click="switchScreen" type="primary">切换横竖屏</button>
		<button @click="recoveryCarTable" type="primary">恢复表格数据</button>
		<view class="select" :style="{'padding-left':pageOrientationJudge?'0':'80rpx'}">
			<uni-section title="车型" type="line" style="width:200px">
				<uni-data-select v-model="carCategory" :localdata="carTableRange" @change="selectCategory">
				</uni-data-select>
			</uni-section>
			<uni-section title="日期" type="line" style="width:200px;padding-left: 10rpx;">
				<view class="example-body">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="buyDate" @change="selectDate" />
				</view>
			</uni-section>
		</view>
		<!-- table -->

		<view>
			<view class="uni-container"
				:style="{'padding-left':pageOrientationJudge?'0':'80rpx','padding-right':pageOrientationJudge?'0':'80rpx'}">
				<uni-table ref="carTable" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
					@selection-change="selectionChange" class="screenStyle" id="carTable">
					<uni-tr>
						<uni-th width="150" align="center">日期</uni-th>
						<uni-th width="150" align="center">购买人</uni-th>
						<uni-th width="150" align="center">车型</uni-th>
						<uni-th align="center">地址</uni-th>
						<uni-th width="204" align="center">设置</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableDataShow" :key="index">
						<uni-td>{{ item.date }}</uni-td>
						<uni-td>
							<view class="name">{{ item.name }}</view>
						</uni-td>
						<uni-td>
							<view class="car">{{ item.car }}</view>
						</uni-td>
						<uni-td align="center">{{ item.address }}</uni-td>
						<uni-td>
							<view class="uni-group">
								<button class="uni-button" size="mini" type="primary">修改</button>
								<button class="uni-button" size="mini" type="warn"
									@click="deleteCarData(item.name)">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="changePage" />
				</view>
			</view>
		</view>

		<!-- 抽屉 -->
		<view>
			<button @click="showDrawer" type="primary">没找到?点这里</button>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<scroll-view style="height: 100%;" scroll-y="true">
					<button @click="closeDrawer" type="primary">关闭导航</button>
					<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
				</scroll-view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	// table
	import tableData from './tableData.js'
	export default {
		data() {
			return {

				// 轮播图
				carPicInfo: [{
					url: 'https://www.ssfiction.com/wp-content/uploads/2020/08/20200806_5f2c70a376cea.jpg',

				}, {
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2011-10-21%2Fenterdesk.com-34A33592E460E16312F5C3921114F3E2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669706620&t=3fc911d1045ff31f186f261bfe37fb97',

				}, {
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-15%2F5a0c00dc3c247.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669706620&t=274614808546c74eb158741270e4c7df',

				}],
				current: 0,
				modeStyle: 'round',

				//other
				screenWidth: '100%',
				buyDate: '',
				carCategory: '',
				carTableRange: [{
						value: 0,
						text: "奔驰"
					},
					{
						value: 1,
						text: "宝马"
					},
					{
						value: 2,
						text: "其他"
					}
				],
				PageOrientation: "portrait",
				// echart


				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2
						}
					}
				},


				// table

				pageOrientationJudge: 'true',
				searchVal: '',
				tableDataSource: [],
				tableDataShow: [],
				// 每页数据量
				pageSize: 6,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}

		},
		//echart
		onReady() {
			this.getServerData();
		},
		//table
		onResize() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					if (_this.PageOrientation == "landscape") {
						// 横屏

						_this.pageOrientationJudge = false
					} else {
						// 竖屏
						_this.pageOrientationJudge = true
					}
				}
			})
		},

		onLoad() {
			this.getSourceData()
			this.selectedIndexs = []
			this.getData(1)
		},

		onUnload() {

		},
		methods: {
			// 抽屉
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			// 轮播图
			dotChange(e) {
				this.current = e.detail.current;
			},
			// other



			//切换横屏
			switchScreen() {

				if (this.PageOrientation === 'portrait') {
					wx.setPageOrientation({
						orientation: 'landscape'
					});
					this.PageOrientation = 'landscape'
				} else {
					wx.setPageOrientation({
						orientation: 'portrait'
					});
					this.PageOrientation = 'portrait'
				}

			},
			//恢复表格数据
			recoveryCarTable() {
				this.carCategory = ''
				this.buyDate = ''
				this.getSourceData()
				this.getData(1)
			},




			//echart
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
								name: "奔驰",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "宝马",
								data: [70, 40, 65, 100, 44, 68]
							},
							{
								name: "其他",
								data: [100, 80, 95, 150, 112, 132]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},

			// table other
			//筛选
			//种类筛选
			selectCategory(e) {
				console.log(this.carCategory)
				if (this.carTableRange[e]) {
					if (this.buyDate == '') {
						this.tableDataSource = tableData.filter((item) => {
							return item.car == this.carTableRange[e].text
						})
					}
					if (this.buyDate !== '') {
						this.tableDataSource = tableData.filter((item) => {
							return item.car == this.carTableRange[e].text && item.date == this.buyDate
						})
					}

				} else {
					if (this.buyDate == '') {
						this.getSourceData()
					} else {
						this.tableDataSource = tableData.filter((item) => {
							return item.date == this.buyDate
						})
					}

				}
				this.getData(1)
			},
			//时间筛选
			selectDate(e) {
				this.tableDataSource = tableData.filter((item) => {
					if (this.carCategory) {
						return item.date == e && item.car == this.carTableRange[this.carCategory].text
					} else {
						return item.date == e
					}

				})
				this.getData(1)
				console.log(e)
			},




			// 删除
			deleteCarData(name) {
				//h5
				// if (confirm('确定删除吗？')) {
				// 	this.tableDataSource = this.tableDataSource.filter((item) => {
				// 		return item.name !== name
				// 	})
				// 	this.getData(this.pageCurrent)
				// }
				let _this = this
				uni.showModal({
					title: '删除后无法恢复',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							_this.tableDataSource = _this.tableDataSource.filter((item) => {
								return item.name !== name
							})
							_this.getData(_this.pageCurrent)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//table
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			changePage(e) {
				console.log(this.$refs)
				//H5
				this.$refs.carTable.clearSelection()


				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			getSourceData() {
				this.tableDataSource = tableData
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableDataShow = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = this.tableDataSource.length
				let data = this.tableDataSource.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					this.tableDataSource.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			}



			//table
		}
	};
</script>

<style scoped>
	/* 轮播图 */
	.swiper-box {
		height: 300px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 300px;
		color: #fff;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */



	/* uchart */
	.charts-box {
		width: 100%;
		height: 300px;
		margin-top: 30px;
	}

	/* table */


	.uni-group {
		display: flex;
		align-items: center;
	}

	/* 其他 */
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* 筛选 */
	.select {
		display: flex;
	}
</style>
